<!-- /components/shopCar.vue -->
<template>
  <view class="cart-container" >
    <view class="cart-icon" @click="toggleCart"> 
	 <image src="/static/shoping.png" class="cart" />
      <uni-badge :text="totalCount" type="error" class="badge"/>
    
    </view>
    
    <uni-popup ref="popup" type="bottom" :mask="true"  @maskClick="close" :mask-click="true" 

     >
      <view class="cart-popup" @touchmove.stop.prevent="preventScroll">
        <view class="cart-header">
          <text>购物车({{totalCount}})</text>
		  <text style="color: blue;" @click="orderList">以往订单</text>
          <text @click="clearCart">清空</text>
        </view>
        
        <scroll-view class="cart-list" scroll-y  @touchmove.stop.prevent="preventScroll">
          <view v-for="item in items" :key="item.productId" class="cart-item">
            <image :src="item.dbPicPath[0].url" class="item-image" />
            <view class="item-info">
              <text class="title">{{item.productName}}</text>
              <text class="price">¥{{item.price}}</text>
            </view>
            <view class="quantity-control">
              <text 
                class="btn minus" 
                @click="changeQuantity(item, -1)">-</text>
              <text class="quantity">{{item.quantity}}</text>
              <text 
                class="btn plus" 
                @click="changeQuantity(item, 1)">+</text>
            </view>
          </view>
        </scroll-view>
        
        <view class="cart-footer">
          <text class="total">合计：¥{{total}}</text>
		  <label style="">
		  	<checkbox v-model="isSend" @click="handerIsSend" /><text >送货上门</text>
		  </label>
          <button class="checkout-btn" @click="checkout">{{isSend?'去结算':'下单'}}</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {sendMsg} from '../methods/msgSend.js';
	const order = uniCloud.importObject('order', {
		customUI: true
	});
export default {
	name:"shopCar",
	props:{
		groupId:{
			type:String,
			default:""
		}
	},
   	data(){
		return{
			isSend:true,
			user:null
		}
		
	},
  computed: {
    items() {
      return this.$store.state.cart.items
    },
    total() {
      return this.$store.state.cart.total
    },
    totalCount() {
      return this.$store.getters['cart.totalCount']
    }
  },
  mounted() {

  },

  onLoad() {
  	console.log(this.items)
  },
  methods: {
	      preventScroll(e) {
	        e.preventDefault();
	      },
     handerIsSend(){
		 this.isSend=!this.isSend
	 },
	 close(){
		   this.$emit('submenushow')
	 },
    toggleCart() {
	  this.$emit('submenushow')
      this.$refs.popup.open()
    },
    changeQuantity(item, delta) {
		console.log("item: " + JSON.stringify(item));
      const newQty = item.quantity + delta
      if (newQty > 0) {
        this.$store.commit('cart/updateQuantity', {
          id: item.productId,
          quantity: newQty
        })
      } else {
        this.$store.commit('cart/removeItem', item.productId)
      }
    },
    clearCart() {
      this.$store.commit('cart/clearCart')
    },
	orderList(){
		uni.navigateTo({
			url:'/pages/orderList/orderList'
		})
	},
 async   checkout() {
	 uni.showLoading({
	 	title:'订单正在提交...'
	 })
	 const _this=this
    console.log("items: " + JSON.stringify(this.items));
	 const orderData={
		 userId:this.user.userId,
		 groupId:this.groupId,
		 productList:this.items,
		 addressId:"123"
	 
	 }

	const data=await order.createOrder(orderData)
	console.log('下单结果',data)
	if(data.success){
		uni.hideLoading()
		uni.showModal({
			title:data.message,
			content:`订单号：${data.orderId}`,
		   success(res) {
			   console.log(res)
		   	if(res.confirm){
				_this.clearCart()
				uni.navigateTo({
					url:'/pages/orderList/orderList'
				})
			}
		   }
		})
				
			
	}else{
			uni.hideLoading()
	 uni.showModal({
	 	title:'下单失败',
		content:`${data.message}`
	 })
	}

     }
  }
}
</script>
<style lang="scss" scoped>
	.cart-container{
		width: 100%;
		height: 100%;
		background-color: #007aff;
		z-index:99999;
	}

.cart-icon {
  position: fixed;
  right: 40rpx;
  bottom: 200rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: #333;
  box-shadow: 0 8rpx 24rpx rgba(0,122,255,0.3);
  z-index: 99;

}
.cart{ position: relative;
	  width: 100rpx;
	  height: 100rpx;
  }
.badge{
	position: absolute;
	top:1rpx;
	left:0,
	
}


.cart-popup {
  background: #fff;
  max-height: 80vh;
  min-height: 300rpx;
  border-radius: 24rpx 24rpx 0 0;
  display: flex;
  flex-direction: column;
  z-index: 99999;
  pointer-events: auto;

}

.cart-header {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  font-size: 32rpx;
  border-bottom: 1rpx solid #f1f1f1;
}

.cart-list {
 flex: 1;
  pointer-events: auto;
  margin-bottom: 180rpx;
  overflow: hidden;
  padding: 0 30rpx;
  max-height: 1000rpx; /* 设置一个最大高度，可根据实际情况调整 */
  overflow-y: auto;

}

.cart-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  margin-right: 30rpx;
  flex-shrink: 0;
}

.item-info {
  flex: 1;
  min-width: 0;
}

.title {
  font-size: 28rpx;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.price {
  font-size: 36rpx;
  color: #e64340;
  font-weight: bold;
  margin-top: 15rpx;
}

.quantity-control {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  margin-right: 50rpx;
}

.btn {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 50%;
  font-size: 36rpx;

}

.btn::after {
  content: "";

  top: -10rpx;
  right: -10rpx;
  bottom: -10rpx;
  left: -10rpx;
}

.plus {
  background: #007aff;
  color: white;
}

.minus {
  border: 2rpx solid #007aff;
  color: #007aff;
}

.quantity {
  margin: 0 20rpx;
  min-width: 40rpx;
  text-align: center;
  font-size: 32rpx;
}

.cart-footer {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  background: #f1f1f1 ;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.05);
  z-index: 1000;
}

.total {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.checkout-btn {
  background: linear-gradient(90deg, #007aff, #00aaff);
  color: white;
  border-radius: 50rpx;
  padding: 0 60rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.3);
}
.uni-popup_mask {
  background: rgba(0,0,0,0.5) !important;
  z-index: 999 !important;
}


.cart-popup {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

</style>